import React, {Component, useEffect} from 'react'
import { Button, Form, Input } from 'antd';
// import PropTypes from 'prop-types';
import Uploads from '../Upload'
import './form.scss'
export default class Forms extends Component {
    constructor(props) {
        super(props)
    }
    formRef = React.createRef()
    uploadsRefs = []
    componentDidMount () {
        if (this.props.onChildEventFAun) { this.props.onChildEventFAun(this) }
    }
    setFieldsValue = (formData, setimg) => {
        this.formRef.current.setFieldsValue(formData)
        if (setimg) {
            this.setImg(formData)
        }
    }
    setImg = formData => {
        const { uploadsRefs } = this
        const arr = uploadsRefs.filter(el => el.current)
        if (arr.length && formData) {
            for (let i = 0; i < arr.length; i++) {
                arr[i].current.setImageUrl(formData[arr[i].current.props.keys])
            }
        }
    }
    onFinish = (values) => {
        console.log('Success:', values);
        this.props.onClick(values)
    }
    onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    }
    getFieldsValue = () => {
        return this.formRef.current.getFieldsValue(true)
    }
    createFormItem = () => {
        const { formList } = this.props
        if (!formList) return null
        this.uploadsRefs = []
        return formList.map((item, index) => {
            let nr = null
            switch(item.type) {
                case 'input':
                    nr = <Input />
                    break;
                case 'upload':
                    this.uploadsRefs.push(React.createRef())
                    nr = <Uploads keys={item.name} setFieldsValue={this.setFieldsValue} ref={this.uploadsRefs[this.uploadsRefs.length - 1]} />
                    break;
            }
            return <Form.Item
                wrapperCol={{ offset: 8, span: 16 }}
                label={ item.label }
                name={ item.name }
                key={ index }
            >
                { nr }
            </Form.Item>
        })
    }
    render() {
        const { formList, noBtn } = this.props
        return (
            <div className={'form-container'}>
                {
                    formList ?
                        <Form
                            ref={this.formRef}
                            name="basic"
                            labelCol={{
                                span: 4,
                            }}
                            wrapperCol={{
                                span: 16,
                            }}
                            initialValues={{
                                remember: true,
                            }}
                            onFinish={ this.onFinish }
                            onFinishFailed={ this.onFinishFailed }
                            autoComplete="off"
                        >
                            { this.createFormItem() }
                            {
                                noBtn ? null :
                                    <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
                                        <Button type="primary" htmlType="submit">
                                            Submit
                                        </Button>
                                    </Form.Item>
                            }
                        </Form> : null
                }

            </div>
        )
    }
}
